<template>
  <el-card>
    <el-table class="elTable" :data="permissionArr" row-key="id" border>
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="code" label="权限值" align="center" />
      <el-table-column prop="updateTime" label="修改时间" align="center" />
      <el-table-column label="操作" align="center">
        <template #default="{ row, index }">
          <el-button @click="addPermission(row)" type="primary" circle icon="Plus" size="small" :disabled="row.level === 4"></el-button>
          <el-button @click="updatePermission(row)" type="warning" circle icon="Edit" size="small" :disabled="row.level === 1"></el-button>
          <el-button @click="deletePermission(row)" type="danger" circle icon="Delete" size="small" :disabled="row.level === 1"></el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <el-dialog v-model="addOrUpdate" :title="permissionParams.id ? '更新菜单' : '添加菜单'">
    <el-form :model="permissionParams" ref="formEle" :rules="rules" label-width="60">
      <el-form-item label="名称" prop="name">
        <el-input v-model="permissionParams.name" />
      </el-form-item>
      <el-form-item label="权限" prop="code">
        <el-input v-model="permissionParams.code" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="confirm">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { Permission, PermissionParams, PermissionList, PermissionResponseData } from '@/api/acl/permission/types';
import { ElMessageBox } from 'element-plus';
// 表单元素
const formEle = ref();
// 是否添加或者更新
const addOrUpdate = ref<boolean>(false);
// 权限菜单数组
const permissionArr = ref<PermissionList>([]);
// 权限参数
const permissionParams = reactive<PermissionParams>({
  code: '',
  level: 0,
  name: '',
  pid: 0,
});

onMounted(() => {
  getPermissions();
});
// 加载数据
const getPermissions = async () => {
  const result: PermissionResponseData = await reqGetPermissions();
  if (result.code === 200) {
    permissionArr.value = result.data;
  }
};
//添加菜单
const addPermission = (row: Permission) => {
  Object.assign(permissionParams, {
    id: 0,
    code: '',
    level: 0,
    name: '',
    pid: 0,
  });
  addOrUpdate.value = true;
  permissionParams.level = row.level + 1;
  permissionParams.pid = row.id as number;
  //清空校验消息
  nextTick(() => {
    formEle.value.clearValidate(['name']);
  });
};
// 更新菜单
const updatePermission = (row: Permission) => {
  Object.assign(permissionParams, row);
  addOrUpdate.value = true;
  //清空校验消息
  nextTick(() => {
    formEle.value.clearValidate(['name']);
  });
};
// 删除菜单
const deletePermission = async (row: Permission) => {
  ElMessageBox.confirm(`确定要删除${row.name}这个菜单吗？`, { title: '提示' })
    .then(async () => {
      const result: any = await reqDeletePermission(row.id as number);
      if (result.code === 200) {
        ElMessage.success('删除成功');
        getPermissions();
      } else {
        ElMessage.error('删除失败');
      }
    })
    .catch(() => {
      ElMessage.success('已取消删除');
    });
};
// 取消添加或者更新菜单
const cancel = () => {
  addOrUpdate.value = false;
};
// 确定添加或者更新菜单
const confirm = async () => {
  await formEle.value.validate();

  const result: any = await reqAddOrUpdatePermission(permissionParams);
  if (result.code === 200) {
    addOrUpdate.value = false;
    ElMessage.success(permissionParams.id ? '更新成功' : '添加成功');
    getPermissions();
  } else {
    ElMessage.error(permissionParams.id ? '更新失败' : '添加失败');
  }
};
// 自定义菜单名称校验
const validatorName = (rule: any, value: any, callBack: any) => {
  if (value === '') {
    callBack('菜单名称不能为空');
  } else {
    callBack();
  }
};
// 自定义校验规则
const rules = reactive({
  name: [{ required: true, trigger: 'blur', validator: validatorName }],
});
</script>

<style lang="scss" scoped>
.elTable {
  height: calc(100vh - $base-tabbar-height - 62px);
}
</style>
